import Taro from '@tarojs/taro';
import { Component } from 'react';
import { View, Text, Image } from '@tarojs/components';
import { NavHeader } from '../../componets/public';
import { getStaticState } from '../../state/static-store';
import { getList } from '../../common/api'


import './list.scss';
const {
  statusBarHeight,
  safeArea,
} = getStaticState('systemInfo');
const Card = function({item, index}) {
  const jump = () => {
    Taro.navigateTo({
      url: item.url
    });
  }
  const margin = (index + 2) % 3 === 0 ? `margin-left: 25rpx; margin-right: 25rpx;` : '';
  return (
    <View onClick={() => jump()} className="card-item" style={margin}>
      <View className='item-title'>{item.cardTitle}</View>
    </View>
  );
}
const Floor = function({ item }) {
  return (<View>
    <View className='floor-title'>
      <Text className='title-text'>{item.rackTitle}</Text>
      <Image className='title-icon' src={item.icon}></Image>
    </View>
    <View className='card-box'>
      {item.card.map((card: object, index: number) => <Card item={card} index={index}></Card>)}
    </View>
  </View>)
}
const Content = function() {
  const list = getList();
  return (<View className='content' style={{marginTop: `${statusBarHeight + safeArea.top}px`}}>
    {
      list.map((item: object) => {
        return <Floor item={item}></Floor>
      })
    }
  </View>)
}
export default class Index extends Component {
  constructor(props){
    super(props);
  }
  componentDidMount () { }
  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  render () {
    return (
      <View className='page-view gr-bg__red_walls'>
        <NavHeader navText='我的列表'></NavHeader>
        <Content></Content>
      </View>
    )
  }
}
